<template>
  <div v-for="(item,index) in title" :key="index" @click="tab(item.id)" :class="item.id == box ?'color':'nocolor'">{{item.name}}</div>
  <div v-if="box == 1">
    <h1>商品后台管理</h1>
    名称:<input type="text" v-model="add_name" /><br />
    类型:<input type="text" v-model="add_type" /><br />
    价格:<input type="text" v-model="add_price" /><br />
    <el-button @click="add" type="primary" circle
      ><el-icon><Plus /></el-icon></el-button
    ><br />
    <input type="text" placeholder="通过id查询" v-model="Searchid" />
    <el-button circle @click="Search">
      <el-icon><Search /></el-icon>
    </el-button>
    <table border="1" style="width: 100%; text-align: center">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>类型</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in arr" :key="index" v-highlight-row="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.price }}</td>
          <td>
            <!-- 方法1：使用标签形式（推荐） -->
            <el-button type="danger" circle @click="del(item.id)">
              <el-icon><Delete /></el-icon>
            </el-button>
            <el-button type="primary" circle @click="update(item.id)">
              <el-icon><Edit /></el-icon>
            </el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="is" class="isbox">
      名称:<input type="text" v-model="update_name" /><br />
      类型:<input type="text" v-model="update_type" /><br />
      价格:<input type="text" v-model="update_price" /><br />
      <el-button @click="yes" type="primary" circle
        ><el-icon><Select /></el-icon
      ></el-button>
    </div>
  </div>
  <StatiStics v-if="box == 2"></StatiStics>
</template>

<script>
import {
  getlist,
  addlist,
  dellist,
  searchlist,
  updatelist,
} from "@/utils/https";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import StatiStics from "@/components/StatiStics.vue"
export default {
  components:{
    StatiStics
  },
  setup() {
    let box = ref(1)
    let title = reactive([{id:1,name:"商品后台管理"},{id:2,name:"统计表"}])
    let update_name = ref();
    let update_price = ref();
    let update_type = ref();
    let updateid = ref();
    let is = ref(false);
    let add_name = ref();
    let add_price = ref();
    let add_type = ref();
    let Searchid = ref();
    const arr = ref([]);
    //渲染
    function apply() {
      getlist()
        .then((val) => {
          arr.value = val.data;
        })
        .catch((e) => {
          console.log(e);
        });
    }
    // tab切换
    function tab(id){
     box.value = id
    }
    //添加
    function add() {
      // 验证输入是否完整
      if (!add_name.value || !add_type.value || !add_price.value) {
        ElMessage.warning({
          message: "请填写完整信息",
          duration: 3000, // 3秒后自动关闭
        });
        return;
      }

      // 验证价格是否为有效数字
      const price = parseFloat(add_price.value);
      if (isNaN(price) || price <= 0) {
        ElMessage.warning({
          message: "请输入有效的价格（大于0的数字）",
          duration: 3000, // 3秒后自动关闭
        });
        return;
      }

      addlist({
        name: add_name.value,
        type: add_type.value,
        price: price, // 使用解析后的数字
      })
        .then(() => {
          apply();
          // 清空表单
          add_name.value = "";
          add_type.value = "";
          add_price.value = "";
          ElMessage.success({
            message: "添加成功",
            duration: 3000, // 3秒后自动关闭
          });
        })
        .catch((e) => {
          console.log(e);
          ElMessage.error({
            message: "添加失败",
            duration: 3000, // 3秒后自动关闭
          });
        });
    }
    //删除
    function del(id) {
      // 添加删除确认对话框
      ElMessageBox.confirm("确定要删除这个商品吗？", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false,
      })
        .then(() => {
          // 用户确认删除
          dellist(id)
            .then(() => {
              apply();
              ElMessage.success({
                message: "商品删除成功",
                duration: 3000, // 3秒后自动关闭
              });
            })
            .catch((e) => {
              console.log(e);
              ElMessage.error({
                message: "删除失败: " + (e.message || "未知错误"),
                duration: 3000, // 3秒后自动关闭
              });
            });
        })
        .catch(() => {
          // 用户取消删除
          ElMessage.info({
            message: "已取消删除",
            duration: 3000, // 3秒后自动关闭
          });
        });
    }
    //搜索
    function Search() {
      searchlist(Searchid.value)
        .then((val) => {
          arr.value = Array(val.data);
          console.log(val.data);
        })
        .catch((e) => {
          console.log(e);
        });
    }
    //修改
    function update(id) {
      updateid.value = id;
      is.value = true;
    }
    //确认修改
    function yes() {
      updatelist(updateid.value, {
        name: update_name.value,
        price: update_price.value,
        type: update_type.value,
      })
        .then(() => {
          apply();
          is.value = false;
        })
        .catch((e) => {
          console.log(e);
        });
    }
    onMounted(() => {
      apply();
    });

    return {
      arr,
      apply,
      add,
      add_name,
      add_price,
      add_type,
      del,
      Search,
      Searchid,
      is,
      update,
      update_name,
      update_price,
      update_type,
      yes,
      title,
      box,
      tab
    };
  },
};
</script>
<style>
.color{
  width: 100px;
  height: 30px;
  background-color: aqua;
  color: #fff;
  border: none;
  border-radius: 3px;
  display: inline-block;
  line-height: 30px;
  font-weight: bold;
  margin-right: 5px;
}
.nocolor{
  width: 100px;
  height: 30px;
  display: inline-block;
  background-color: #ccc;
  border-radius: 3px;
  line-height: 30px;
  margin-right: 5px;
}
.isbox {
  width: 300px;
  height: 200px;
  position: fixed;
  top: 45%;
  left: 40%;
  background-color: aqua;
}
</style>